
<template>
  <div class="card" style="padding:10px" >
  <div style="margin: 10px">
    <el-input v-model="data.college" style="width: 300px; margin-right: 10px" placeholder="按学院查询"></el-input>
    <el-input v-model="data.speciality" style="width: 300px; margin-right: 10px" placeholder="按专业查询"></el-input>
    <el-input v-model="data.classes" style="width: 300px; margin-right: 10px" placeholder="按班级查询"></el-input>

    <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
    <el-button type="info" @click="reset" >重置</el-button>
    </div>
  </div>

    <div style="margin: 10px">
      <div class="card" style="padding:10px" >
        <el-button type="primary" @click="handleAdd">添加学生信息</el-button>

      <el-table :data="data.tableData" style="width: 100%" :default-sort="{ prop: 'time', order: 'descending'}">
        <el-table-column prop="id" label="学号" width="120" />
        <el-table-column prop="username" label="姓名" width="120" />
        <el-table-column prop="mbti" label="Mbti类型" width="120" />
        <el-table-column prop="college" align="center" label="学院" width="180" />
        <el-table-column prop="speciality" label="专业" width="120" />
        <el-table-column prop="classes" label="班级" width="120" />
        <el-table-column prop="time" label="测试时间" width="120" />
        <el-table-column label="操作" align="center" width="160">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
<!--      //添加信息弹窗-->
      <el-dialog v-model="data.formVisible" title="添加学生信息" width="500">
        <el-form :model="data.form" label-width="120px">
          <el-form-item label="学号">
            <el-input v-model="data.form.id" autocomplete="off" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="data.form.username" autocomplete="off" />
          </el-form-item>
          <el-form-item label="Mbti类型">
            <el-input v-model="data.form.mbti" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学院">
            <el-input v-model="data.form.college" autocomplete="off" />
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="data.form.speciality" autocomplete="off" />
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="data.form.classes" autocomplete="off" />
          </el-form-item>
          <el-form-item label="测试时间">
            <el-date-picker
                v-model="data.form.time"
                type="date"
                placeholder="Pick a date"
                clearable
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.formVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

            <!--编辑信息弹窗-->
            <el-dialog v-model="data.updateformVisible" title="编辑学生信息" width="500">
              <el-form :model="data.form" label-width="120px">
                <el-form-item label="学号">
                  <el-input v-model="data.form.id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="data.form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Mbti类型">
                  <el-input v-model="data.form.mbti" autocomplete="off" />
                </el-form-item>
                <el-form-item label="学院">
                  <el-input v-model="data.form.college" autocomplete="off" />
                </el-form-item>
                <el-form-item label="专业">
                  <el-input v-model="data.form.speciality" autocomplete="off" />
                </el-form-item>
                <el-form-item label="班级">
                  <el-input v-model="data.form.classes" autocomplete="off" />
                </el-form-item>
                <el-form-item label="测试时间">
                  <el-date-picker
                      v-model="data.form.time"
                      type="date"
                      placeholder="Pick a date"
                      clearable
                  />
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="data.updateformVisible = false">取消</el-button>
                  <el-button type="primary" @click="update">确认</el-button>
          </div>
        </template>
      </el-dialog>


</template>

<script setup>
import request from "@/utils/request";
import {reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const data = reactive({
  name: '',
  college: '',
  speciality: '',
  classes: '',
  tableData: [],
  formVisible: false,
  form:{}
})
const load = () =>{
  console.log("Sending parameters:", data.college, data.speciality, data.classes);
  request.get('/result/listStudent',
      {
        params: {
          college: data.college,
          speciality: data.speciality,
          classes: data.classes
        }
      }).then(res => {
    data.tableData = res.data || []
  }).catch(error => {
    console.error('Error fetching data:', error); // 输出错误信息
  });
}
//调用方法获取后台数据
load()

const reset = () =>{
  data.college = ''
  data.speciality = ''
  data.classes = ''
  load()
}
const handleAdd = () => {
  data.form={}
  data.formVisible = true
}
//保存数据到后台
const save = () => {
  request.post('/result/addStudent',data.form).then(res => {
    if(res.code === '200') {
      load()   //重新获取数据
      data.formVisible = false
      ElMessage.success("操作成功")
    }else {
      ElMessage.error(res.msg)
    }
  })
}

const update = () => {
  request.put( '/result/updateStudent', data.form).then(res => {
    if(res.code === '200') {
      load()   //重新获取数据
      data.updateformVisible = false
      ElMessage.success("操作成功")
    }else {
      ElMessage.error(res.msg)
    }
  })
}
//编辑
const handleEdit = (row) => {
  console.log('Clicked edit button')
  data.form =JSON.parse(JSON.stringify(row))
  data.updateformVisible = true
}

//删除
const handleDelete = (id) =>(
    ElMessageBox.confirm('确定删除该学生信息吗？', '删除确认', {type: 'warning'}).then(res =>{
      request.delete('/result/deleteStudent/' + id).then(res => {
        if(res.code === '200') {
          load()   //重新获取数据
          ElMessage.success("删除成功")
        }else {
          ElMessage.error(res.msg)
        }
      })
    }).catch(res => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
)

</script>